<template>
    <div class="layout">
        <div class="top_title_box">
            <div @click="tabsChange(1)" :class="current == 1 ? 'title_item active' : 'title_item'">园区总览</div>
            <div @click="tabsChange(2)" :class="current == 2 ? 'title_item active' : 'title_item'">ALStation</div>
            <div @click="tabsChange(3)" :class="current == 3 ? 'title_image left active' : 'title_image left'">INCloud oS
            </div>
            <div class="title_center">算力中心园区运营管理平台</div>
            <div @click="tabsChange(4)" :class="current == 4 ? 'title_image right active' : 'title_image right'">基础监控
            </div>
            <div @click="tabsChange(5)" :class="current == 5 ? 'title_item active' : 'title_item'">能源监测</div>
            <div @click="tabsChange(6)" :class="current == 6 ? 'title_item active' : 'title_item'">安防监测</div>
        </div>
        <div class="top_label">DICC campus operation management platform</div>
        <div class="time">{{ time }}</div>
        <div class="page_box">
            <general-view v-if="current==1" />
            <a-l-station v-if="current==2" />
            <in-cloud-os v-if="current==3" />
            <supervisory-control v-if="current==4" />
            <energy-sources v-if="current==5" />
            <safety-protection v-if="current==6" />
        </div>
    </div>
</template>

<script>
import GeneralView from '../component/general.vue'
import ALStation from '../component/aLStation.vue'
import InCloudOs from '../component/inCloudOs.vue'
import SupervisoryControl from '../component/supervisoryControl.vue'
import EnergySources from '../component/energySources.vue'
import SafetyProtection from '../component/safetyProtection.vue'
export default {
    name: 'IndexHome',
    components: {
        GeneralView,
        ALStation,
        InCloudOs,
        SupervisoryControl,
        EnergySources,
        SafetyProtection
    },
    data() {
        return {
            current: 6,
            time: ''
        }
    },

    mounted() {
        this.getTime()
    },

    methods: {
        tabsChange(type) {
            this.current = type
        },
        getTime() {
            this.getCurrentDateTime()
            setInterval(() => {
                this.getCurrentDateTime()
            }, 1000);
        },
        getCurrentDateTime() {
            let now = new Date();
            // 获取日期部分
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以要+1
            let day = now.getDate().toString().padStart(2, '0');
            // 获取时间部分
            let hours = now.getHours().toString().padStart(2, '0');
            let minutes = now.getMinutes().toString().padStart(2, '0');
            let seconds = now.getSeconds().toString().padStart(2, '0');
            // 获取星期部分
            let weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            let weekDay = weekDays[now.getDay()];
            // 组合成目标格式
            this.time = `${year}.${month}.${day} ${weekDay} ${hours}:${minutes}:${seconds}`;
        }
    }
}
</script>
<style lang="scss" scoped>
.layout {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #051F35;

    .top_title_box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
        z-index: 999;
        .title_item:first-child {
            margin-left: 0;
        }

        .title_item {
            width: 197px;
            height: 102px;
            background: #073B62;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 20px;
            color: #1A9ACB;
            margin-left: 2px;
            cursor: pointer;

            &.active {
                background: #00538A;
                font-weight: 400;
                color: #fff;
            }
        }

        .title_center {
            flex: 1;
            height: 89px;
            background: #073B62;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 2px;
            font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
            font-weight: 400;
            font-size: 36px;
            color: #1A9ACB;
        }

        .title_image {
            width: 197px;
            height: 102px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: FZLTH_YS_BIG5, FZLTH_YS_BIG5;
            font-weight: 400;
            font-size: 20px;
            color: #1A9ACB;
            margin-left: 2px;
            cursor: pointer;

            &.left {
                background: url('@/assets/left_top.png') no-repeat;
                background-size: 100% 100%;

                &.active {
                    font-weight: 400;
                    color: #fff;
                    background: url('@/assets/a-left.png') no-repeat;
                    background-size: 100% 100%;
                }
            }

            &.right {
                background: url('@/assets/right_top.png') no-repeat;
                background-size: 100% 100%;

                &.active {
                    font-weight: 400;
                    color: #fff;
                    background: url('@/assets/a-right.png') no-repeat;
                    background-size: 100% 100%;
                }
            }
        }
    }

    .top_label {
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
        font-weight: 400;
        font-size: 10px;
        color: #1A9ACB;
        margin-top: -8px;
    }

    .time {
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK;
        font-weight: 400;
        font-size: 12px;
        color: #1A9ACB;
        padding: 0 32px;
        text-align: right;
    }
    .page_box{
        width: calc(100vw - 64px);
        height: calc(100vh - 145px);
        margin: 6px auto 0;
    }
}
</style>